<template>
  <div class="cont">
    <div class="addInfo">
      <div class="addAddress">
        <div class="">收货人</div>
        <div><input type="text" placeholder="姓名"></div>
      </div>
      <div class="addAddress">
        <div class="">手机号</div>
        <div><input type="text" placeholder="收货人手机号"></div>
      </div>
      <div class="addAddress">
        <div class="">所在地</div>
        <div><img src="@/assets/address-icon.png" alt=""></div>
      </div>
      <div class="addAddress detail">
        <div class="">详细地址</div>
        <div><input type="text" placeholder="街道门牌信息"></div>
      </div>
    </div>
    <div class="check"><van-checkbox v-model="checked" checked-color="#D63A54">设为默认</van-checkbox></div>
    <div class="add_btn" @click="right">确定</div>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      checked: true
    }
  },
  methods: {
    right() {
      Toast('收货地址添加成功！')
    }
  }
}
</script>
<style lang="less">
.cont{
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    .addInfo{
        width: 100%;
        padding: 3vw 4vw 1vw;
        background: #f5f6f8;
        box-sizing: border-box;
        .addAddress{
             width: 100%;
             background: #fff;
             padding: 10px;
             box-sizing: border-box;
             border-radius: 6px;
             display: flex;
             justify-content: space-between;
             margin-bottom: 10px;
             input{
                 border:none;
                 text-align: right;
             }
        }
        .detail{
            display: block;
            padding-bottom: 40px;
            input{
                 text-align: left;
            }
        }
    }
    .check{
        position: absolute;
        left: 50%;
        top: 55%;
        transform: translate(-50%,-50%);

    }
    .add_btn{
        width: 90%;
        border: 1px solid;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: center;
        background: #d63a54;
        position: absolute;
        left: 50%;
        top: 63%;
        transform: translate(-50%,-50%);
        border-radius: 10px;
        font-size: 14px;
    }
}
</style>
